<template>
  <div>
    <!-- 入职 -->
    <div>
      
    </div>
    <el-row>
      <el-col :span="22">
        <div class="sec-title">练习</div>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-table
      :data="practices"
      height="590"
    >
      <el-table-column
        prop="paperInstId"
        label="练习编号"
      >
      </el-table-column>
      <el-table-column
        prop="paperName"
        label="试卷名称"
      >
      </el-table-column>
      <el-table-column
        prop="realScore"
        label="得分"
      >
      </el-table-column>
      <el-table-column
        prop="isWin"
        label="是否通过"
      >
      </el-table-column>
      <el-table-column
        prop="realTime"
        label="答题时间"
      >
      </el-table-column>
      <el-table-column
        prop="accountName"
        label="答题人"
      >
      </el-table-column>
      <el-table-column
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="deleteHandle(scope.row)"
          >删除</el-button>
          <el-button
            type="text"
            size="small"
            @click="exportHandle(scope.row)"
          >导出</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="pageData.total"
      @prev-click="preHandle"
      @next-click="nextHandle"
      @current-change="currentChangeHandle"
    >
    </el-pagination>
  </div>
</template>
<script>
import { exportPaper, deletePractice, queryPaperPractice } from '@/api/system/system.js'
export default {
  props: {
    paperPractice: {
        requierd: false,
        default: {}
    }
  },
  data() {
    return {
      paper: {},
      practices: [],
      pageData: {
        current: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  async mounted() {
    this.practices = this.paperPractice.paperInstList
    this.paper = this.paperPractice.paper
  },
  methods: {
    preHandle(current) {
      this.currentChangeHandle(current)
    },
    nextHandle(current) {
      this.currentChangeHandle(current)
    },
    currentChangeHandle(current) {
      this.pageData.current = current
      this.searchPapers()
    },
    async exportHandle(row) {
        const {data: res} = await exportPaper(row.paperInstId)
        if (res.code === 200) {
            var fileName = row.paperName + '.docx'
						let link = document.createElement('a')
						link.download = fileName
						link.style.display = 'none'
						link.href = res.data.path
						document.body.appendChild(link)
						link.click()
						URL.revokeObjectURL(link.href)
						document.body.removeChild(link)
        } else {
            this.$message.error('下载失败')
        }
    },
    deleteHandle(row) {
      let _this = this
      this.$alert('删除练习', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this.deleteRoleHandle(row)
        }).catch(() => {
          _this.$message.success('已取消')
        })
    },
    async deleteRoleHandle(row) {
      const {data: res} = await deletePractice(row.paperInstId)
      if (res.code === 200) {
        this.$message.success("删除成功")
      }
      if (res.code === 500) {
        this.$message.error(res.message)
      }
      this.searchPaperPractice()
    },
    async searchPaperPractice() {
        const {data: res} = await queryPaperPractice(this.paper.paperId)
        if (res.code === 200) {
            this.practices = res.data.practices.paperInstList
            this.paper = res.data.practices.paper
        }
    }
  },
};
</script>

<style lang="css" scoped>
.sec-blue {
  color: #409eff;
}
.sec-title {
  font-size: 18px;
  font-weight: 700;
}
</style>